// 开发环境的 Webpack 配置
const { merge }= require('webpack-merge');
const path = require('path');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: "development",
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader' , 'postcss-loader', {
                    loader: "less-loader",
                    options: {
                        lessOptions: {
                            javascriptEnabled: true
                        }
                    }
                }]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name]-[hash][ext]'
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                filename: 'assets/fonts/[name][ext]'
                }
            }
        ]
    },
    // webpack-dev-server 会在内存中实时编译代码，并将编译后的文件托管在内存中（不会生成实际的dist目录）
    devServer: {
        // 用于指定开发服务器托管的静态文件目录
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true, // 启用gzip压缩
        port: 9999, // 端口号
        hot: true, // 启用HMR
        open: true, // 自动打开浏览器
        // 代理配置（解决跨域问题）
        proxy: [
            {
                context: ['/api'],
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        ],
        historyApiFallback: true, // 开启 SPA 路由回退
    }
})

/*
    devtool 是 Webpack 中用于配置**源代码映射（Source Map）**的选项
    作用：
        调试支持：将编译后的代码映射回原始源代码，方便在浏览器开发者工具中调试
        错误追踪：当代码出错时，能准确显示错误在原始源文件中的位置
        性能分析：帮助分析打包后的代码性能
    场景需要：
        开发环境：需要快速重建和详细的映射信息，便于调试
        生产环境：需要平衡调试需求和构建性能，同时考虑安全性（不暴露完整源码）
        测试环境：根据测试类型（单元测试/E2E测试）选择合适的映射方式
    推荐：
        开发环境 eval-source-map
            提供完整的行级映射
            重建速度快（修改文件后快速刷新）
            包含模块信息（适合使用 loader 转换的代码）

        生成环境 source-map
            生成独立的 .map 文件
            不暴露完整源码到浏览器
            平衡了构建速度和映射质量
    特殊场景:
        需要保护源码时：
            使用 hidden-source-map（源码映射文件不上传到 CDN）
            或 nosources-source-map（只显示错误堆栈，不显示源码）
        大型项目优化：
            开发环境：eval-cheap-module-source-map（忽略列信息提升速度）
            生产环境：cheap-module-source-map（在速度和完整性间平衡）
        性能分析场景：
            使用 source-map 确保分析工具能准确追踪原始代码

    这种分级配置方案既保证了开发效率，又兼顾了生产环境的安全性和性能。


    historyApiFallback: true 底层原理
        Webpack DevServer 内部会拦截所有请求，如果请求的路径 不在静态文件列表中（如 .js、.css），则返回 index.html。
        相当于模拟了生产环境的行为（如 Nginx 配置的 try_files $uri /index.html）
*/